<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="这是一个 index 页面">
        <meta name="keywords" content="index">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="apple-mobile-web-app-title" content="Amaze UI" />
        <title>Amaze UI Admin index Examples</title>

        <link rel="stylesheet" href="assets/css/amazeui.min.css" />
        <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
        <link rel="stylesheet" href="assets/css/app.css">
        <link rel="stylesheet" href="assets/css/index/user.css" />
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/echarts.min.js"></script>
    </head>
    <body data-type="user-active">
        <script src="assets/js/theme.js"></script>
        <div class="am-g tpl-g">
            <!-- 用户活跃度-内容区域 -->
            <div class="tpl-content-wrapper">
                <div class="container-fluid am-cf">
                    <div class="row">
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                            <div id="page-title" class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 活跃度</div>
                        </div>
                    </div>
                </div>

                <div class="row-content am-cf">
                    <div id="select-panel" class="am-panel am-panel-primary">
                          <div class="am-panel-hd">
                            <h3 style="display:inline-block;" class="am-panel-title">高级筛选</h3>
                            <i id="fixed_icon_1" style="float:right;"></i>
                          </div>
                          <ul class="am-list am-list-static" id="panel_content_1">
                            <li class="select-list">
                                <span class="select-list-title">时间筛选</span>
                                <span class="select-list-content">
                                    <ul id="time">
                                        <li class="select-active select-list-first">今天</li>
                                        <li>最近7天</li>
                                        <li>最近30天</li>
                                    </ul>
                                    <ul class="timepicker">
                                        <li class="am-u-sm-3 am-u-md-2 am-u-lg-2 input-group am-input-group-sm tpl-form-border-form cl-p firsttime">
                                            <input type="text" class="am-form-field" placeholder="开始时间" data-am-datepicker readonly required>
                                        </li>
                                        <li class="input-group am-input-group-sm tpl-form-border-form cl-p">
                                            <input type="text" class="am-form-field" placeholder="结束时间" data-am-datepicker readonly required>
                                        </li>
                                    </ul>
                                    <!-- <form action="" class="am-form am-form-inline">
                                        <div class="am-form-group am-form-icon">
                                            <i class="am-icon-calendar"></i>
                                            <input id="reservation" type="text" class="am-form-field" placeholder="日期" value="2017-05-21 - 2017-06-09">
                                        </div>
                                    </form> -->
                                </span>
                            </li>
                            <li class="select-list">
                                <span class="select-list-title">渠道筛选</span>
                                <span class="select-list-content">
                                    <ul id="channel">
                                        <li class="select-active select-list-first">全部</li>
                                        <li>IOS</li>
                                        <li>Android</li>
                                        <li>笔记本电脑</li>
                                        <li>IOS</li>
                                        <li>Android</li>
                                        <li>笔记本电脑</li>
                                        <li>IOS</li>
                                        <li>Android</li>
                                        <li>笔记本电脑</li>
                                    </ul>
                                </span>
                            </li>
                            <li class="select-list">
                                <span class="select-list-title">指标筛选</span>
                                <span class="select-list-content">
                                    <ul id="indicator">
                                        <li class="select-list-first select-active">日活/月活</li>
                                        <li>累计访问</li>
                                        <li>当日访问</li>
                                    </ul>
                                </span>
                            </li>
                          </ul>
                    </div>
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">活跃度</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div style="height:450px" class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="tpl-echarts"></div>
                    </div>
            </div>
        </div> 
        </div>

        <button class="btn btn-primary" id="show_modal">点击显示</button>
        <!-- 新增模态弹窗 -->
        <div class="am-modal am-modal-prompt" tabindex="-1" id="my-modal">
          <div class="am-modal-dialog">
            <div class="am-modal-hd">
                <span data-am-modal-close class="am-close">&times;</span>
                <br />
            </div>
            <div class="am-modal-bd modal-add">
              <table class="am-table">
                <thead>
                    <tr class="am-primary">
                        <th class="am-text-center">日期</th>
                        <th class="am-text-center">启动用户</th>
                        <th class="am-text-center">日活/月活</th>
                        <th class="am-text-center">周活跃用户</th>
                        <th class="am-text-center">月活跃用户</th>
                        <th class="am-text-center">月沉默用户用户</th>
                        <th class="am-text-center">累计启动用户</th>
                    </tr>
                </thead>
                <tbody id="active-data">
                    <tr>
                        <td>2017/07/03</td>
                        <td>123</td>
                        <td>23</td>
                        <td>23</td>
                        <td>123</td>
                        <td>123</td>
                        <td>123</td>
                    </tr>
                </tbody>
            </table>
            </div>
          <div class="am-modal-footer">
          </div>
         </div>
        </div>
        <script src="assets/js/amazeui.min.js"></script>
        <script src="assets/js/com.js"></script>
        <script src="assets/js/indexjs/user-active.js"></script>
        <script>
            // 分页组件引用
            $("#paging").initPage(100,1);
            // 日历组件引用
            $(document).ready(function() {
                $('#reservation').daterangepicker(null, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                });
            });
            // httpRequest.filterUrl("user-active");
            // panelFixed.init();
            panelFold.init({"el":"#fixed_icon_1","obj":"#panel_content_1"});
            
            $("#show_modal").click(function(){
                $("#my-modal").modal({
                    relatedTarget: this,
                    width:1000,
                    onConfirm: function(e){
                        
                        $("#delete-modal").modal("close");
                    },
                    onCancel: function(e) {
                        $("#delete-modal").modal("close");
                    }
                });
            });
        </script>

        <script>
        //图表
        function getRes(){
            var now = new Date();
            var second = parseInt(now.getSeconds().toString().slice(0,1));
            var res = ((Math.random() + 2).toFixed(1) - 0) * second;
            if(res > 10){
                res = res - 4;
            }else if(res < 2){
                res = res + 2;
            }

            return res;
        }
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('tpl-echarts')); 
        
        var option = {
            //标题组件
            // title: {
            //     text: '动态数据 + 时间坐标轴'
            // },
            //提示框组件
            tooltip: {
                trigger: 'axis'  //触发类型，坐标轴触发
            },
            //图例组件  用于展现不同系列的标记
            legend:{
                data:["最新成交价","预购队列"],
                textStyle:{
                    color:"#838FA1"
                }
            },
            //工具栏 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置
            toolbox:{
                show:true,
                feature:{
                    dataView:{readOnly:false},
                    restore:{},
                    saveImage:{}
                }
            },
            //用于区域缩放
            dataZoom:{
                show:false,
                start:0,
                end:100
            },
            //直角坐标系x轴
            xAxis: {
                type: 'category',  //类目轴  必须通过data是指类目数据
                boundaryGap:true,  //坐标两边留白政策，默认为true
                name:"时间",
                data:(function(){
                    var now = new Date();
                    var res = [];
                    var len = 100;
                    while(len--){
                        res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                        now = new Date(now - 2000);
                    }
                    return res;
                })()  //x坐标轴显示数据
            },
            yAxis: {
                type: 'value',
                scale:true,  //是否脱离0比值，只在type:"value"中有效  设置为true坐标轴不会强制包含0刻度
                splitLine: {
                    show: true  //坐标轴在grid区域中的分隔线
                },
                name:"价格",
                max:20,
                min:0,
                boundaryGap:[0.2,0.2]
            },
            textStyle: {
                color: '#838FA1'
            },
            //系列列表
            series: [
            {
                name: '最新成交价',
                type: 'line',
                data: (function(){
                    var res = [];
                    var len = 100;
                    while(len--){
                        res.push(getRes());
                    }
                    return res;
                })()  //初始化加载数组
            },
            {
                name:"预购队列",
                type:"line",
                data:(function(){
                    var res = [];
                    var len = 100;
                    while(len--){
                        res.push(getRes());
                    }
                    return res;
                })(),  //初始加载数组
                itemStyle: {
                    normal: {
                        color: '#577ceb',
                        borderColor: '#1cabdb',
                        borderWidth: '2',
                        borderType: 'solid',
                        opacity: '0.8'
                    },
                    emphasis: {}
                }
            }
            ]
        };

    myChart.setOption(option);

    setInterval(function(){
        axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

        var data0 = option.series[0].data;
        var data1 = option.series[1].data;

        data0.shift();
        data0.push(getRes());  //push一条数据
        data1.shift();
        data1.push(getRes());

        option.xAxis.data.shift();
        option.xAxis.data.push(axisData);

        myChart.setOption(option);
    },2000);
        </script>
        
    </body>
</html>